﻿
<div class="page-title">
  <h1>
            栅格
  </h1>
</div>


<hr>
<h2>在最小分辨率col-lg- col-md- col-sm- col-xs-（一般用它就行）</h2>

<div class="grid-structure">
  <div class="row">
    <div class="col-xs-12">
      <div class="widget-container fluid-height">
        xs12
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-11">
      <div class="widget-container fluid-height">
        xs11
      </div>
    </div>
    <div class="col-xs-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-10">
      <div class="widget-container fluid-height">
        xs10
      </div>
    </div>
    <div class="col-xs-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-9">
      <div class="widget-container fluid-height">
        xs9
      </div>
    </div>
    <div class="col-xs-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-8">
      <div class="widget-container fluid-height">
        xs8
      </div>
    </div>
    <div class="col-xs-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-7">
      <div class="widget-container fluid-height">
        xs7
      </div>
    </div>
    <div class="col-xs-5">
      <div class="widget-container fluid-height">
        xs5
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <div class="widget-container fluid-height">
        xs6
      </div>
    </div>
    <div class="col-xs-6">
      <div class="widget-container fluid-height">
        xs6
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-5">
      <div class="widget-container fluid-height">
        xs5
      </div>
    </div>
    <div class="col-xs-7">
      <div class="widget-container fluid-height">
        xs7
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
    <div class="col-xs-8">
      <div class="widget-container fluid-height">
        xs8
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
    <div class="col-xs-9">
      <div class="widget-container fluid-height">
        xs9
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-xs-10">
      <div class="widget-container fluid-height">
        xs10
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
    <div class="col-xs-11">
      <div class="widget-container fluid-height">
        xs11
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-xs-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
    <div class="col-xs-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
    <div class="col-xs-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-xs-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
  </div>
</div>



<hr>
<h2>在次大分辨率col-lg- col-md- col-sm- col-xs-</h2>

<div class="grid-structure">
  <div class="row">
    <div class="col-md-12">
      <div class="widget-container fluid-height">
        col-md-12
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-11">
      <div class="widget-container fluid-height">
        col-md-11
      </div>
    </div>
    <div class="col-md-1">
      <div class="widget-container fluid-height">
        col-md-1
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-10">
      <div class="widget-container fluid-height">
        col-md-10
      </div>
    </div>
    <div class="col-md-2">
      <div class="widget-container fluid-height">
        col-md-2
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-9">
      <div class="widget-container fluid-height">
        col-md-9
      </div>
    </div>
    <div class="col-md-3">
      <div class="widget-container fluid-height">
        col-md-3
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="widget-container fluid-height">
        col-md-8
      </div>
    </div>
    <div class="col-md-4">
      <div class="widget-container fluid-height">
        col-md-4
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-7">
      <div class="widget-container fluid-height">
        col-md-7
      </div>
    </div>
    <div class="col-md-5">
      <div class="widget-container fluid-height">
        col-md-5
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <div class="widget-container fluid-height">
        col-md-6
      </div>
    </div>
    <div class="col-md-6">
      <div class="widget-container fluid-height">
        col-md-6
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-5">
      <div class="widget-container fluid-height">
        col-md-5
      </div>
    </div>
    <div class="col-md-7">
      <div class="widget-container fluid-height">
        col-md-7
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-4">
      <div class="widget-container fluid-height">
        col-md-4
      </div>
    </div>
    <div class="col-md-8">
      <div class="widget-container fluid-height">
        col-md-8
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <div class="widget-container fluid-height">
        col-md-3
      </div>
    </div>
    <div class="col-md-9">
      <div class="widget-container fluid-height">
        col-md-9
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="widget-container fluid-height">
        col-md-2
      </div>
    </div>
    <div class="col-md-10">
      <div class="widget-container fluid-height">
        col-md-10
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-1">
      <div class="widget-container fluid-height">
        col-md-1
      </div>
    </div>
    <div class="col-md-11">
      <div class="widget-container fluid-height">
        col-md-11
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="widget-container fluid-height">
        col-md-2
      </div>
    </div>
    <div class="col-md-3">
      <div class="widget-container fluid-height">
        col-md-3
      </div>
    </div>
    <div class="col-md-4">
      <div class="widget-container fluid-height">
        col-md-4
      </div>
    </div>
    <div class="col-md-2">
      <div class="widget-container fluid-height">
        col-md-2
      </div>
    </div>
    <div class="col-md-1">
      <div class="widget-container fluid-height">
        col-md-1
      </div>
    </div>
  </div>
</div>


<hr>
<h2>在次小分辨率col-lg- col-md- col-sm- col-xs-</h2>

<div class="grid-structure">
  <div class="row">
    <div class="col-sm-12">
      <div class="widget-container fluid-height">
        xs12
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-11">
      <div class="widget-container fluid-height">
        xs11
      </div>
    </div>
    <div class="col-sm-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-10">
      <div class="widget-container fluid-height">
        xs10
      </div>
    </div>
    <div class="col-sm-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-9">
      <div class="widget-container fluid-height">
        xs9
      </div>
    </div>
    <div class="col-sm-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8">
      <div class="widget-container fluid-height">
        xs8
      </div>
    </div>
    <div class="col-sm-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-7">
      <div class="widget-container fluid-height">
        xs7
      </div>
    </div>
    <div class="col-sm-5">
      <div class="widget-container fluid-height">
        xs5
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6">
      <div class="widget-container fluid-height">
        xs6
      </div>
    </div>
    <div class="col-sm-6">
      <div class="widget-container fluid-height">
        xs6
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-5">
      <div class="widget-container fluid-height">
        xs5
      </div>
    </div>
    <div class="col-sm-7">
      <div class="widget-container fluid-height">
        xs7
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
    <div class="col-sm-8">
      <div class="widget-container fluid-height">
        xs8
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
    <div class="col-sm-9">
      <div class="widget-container fluid-height">
        xs9
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-sm-10">
      <div class="widget-container fluid-height">
        xs10
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
    <div class="col-sm-11">
      <div class="widget-container fluid-height">
        xs11
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-sm-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
    <div class="col-sm-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
    <div class="col-sm-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-sm-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
  </div>
</div>



<hr>
<h2>在最大分辨率col-lg- col-md- col-sm- col-xs-（一般用它就行）</h2>

<div class="grid-structure">
  <div class="row">
    <div class="col-lg-12">
      <div class="widget-container fluid-height">
        xs12
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-11">
      <div class="widget-container fluid-height">
        xs11
      </div>
    </div>
    <div class="col-lg-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-10">
      <div class="widget-container fluid-height">
        xs10
      </div>
    </div>
    <div class="col-lg-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-9">
      <div class="widget-container fluid-height">
        xs9
      </div>
    </div>
    <div class="col-lg-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-8">
      <div class="widget-container fluid-height">
        xs8
      </div>
    </div>
    <div class="col-lg-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-7">
      <div class="widget-container fluid-height">
        xs7
      </div>
    </div>
    <div class="col-lg-5">
      <div class="widget-container fluid-height">
        xs5
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6">
      <div class="widget-container fluid-height">
        xs6
      </div>
    </div>
    <div class="col-lg-6">
      <div class="widget-container fluid-height">
        xs6
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-5">
      <div class="widget-container fluid-height">
        xs5
      </div>
    </div>
    <div class="col-lg-7">
      <div class="widget-container fluid-height">
        xs7
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
    <div class="col-lg-8">
      <div class="widget-container fluid-height">
        xs8
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
    <div class="col-lg-9">
      <div class="widget-container fluid-height">
        xs9
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-lg-10">
      <div class="widget-container fluid-height">
        xs10
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
    <div class="col-lg-11">
      <div class="widget-container fluid-height">
        xs11
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-lg-3">
      <div class="widget-container fluid-height">
        xs3
      </div>
    </div>
    <div class="col-lg-4">
      <div class="widget-container fluid-height">
        xs4
      </div>
    </div>
    <div class="col-lg-2">
      <div class="widget-container fluid-height">
        xs2
      </div>
    </div>
    <div class="col-lg-1">
      <div class="widget-container fluid-height">
        xs1
      </div>
    </div>
  </div>
</div>
